<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="{{ url_for('static',filename='images/favicon.ico') }}">
    <!-- 引入 Bootstrap CSS -->
    <link href="{{ url_for('static',filename='css_cdn/twitter-bootstrap/3.3.7/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- 引入 jQuery -->
    <script src="{{ url_for('static',filename='js/jquery-1.11.0.min.js') }}" type="text/javascript"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="{{ url_for('static',filename='js_cdn/bootstrap/3.3.7/js/bootstrap.min.js') }}"></script>
     <link href="{{ url_for('static',filename='css_cdn/font-awesome/4.7.0/css/font-awesome.min.css') }}" rel="stylesheet">
    <title>funboost web manager</title>
    <style>
        body {
            overflow-x: hidden;
        }

        .sidebar {
            position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 180px;
        background-color: #296074;
        padding-top: 20px;
        overflow-y: auto;
        transition: all 0.3s ease;  /* 添加过渡效果 */
        }
        .sidebar.collapsed {
        width: 50px;
    }


        .sidebar .nav-link {
            color: white;
            background-color: #296074; /* 导航栏链接默认灰色背景 */
            margin-bottom: 5px;
            border-radius: 5px;
        }

        .sidebar .nav-link.active {
            background-color: #0BBAF8; /* 激活状态蓝色背景 */
            color: white;
        }

        .main-content {
            margin-left: 180px;
            transition: all 0.3s ease;  /* 添加过渡效果 */
        }
        
        .main-content.expanded {
        margin-left: 50px;
    }

    .toggle-btn {
        position: fixed;
        left: 180px;
        top: 10px;
        z-index: 1000;
        background: #296074;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .toggle-btn.collapsed {
        left: 50px;
    }

    .sidebar.collapsed .nav-link span {
        display: none;
    }

    .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }



        .main-content iframe {
            width: 100%;
            height: calc(100vh - 40px);  /* 视窗高度减去padding */
            padding: 20px;
            border: none;
            overflow: auto;
        }

        .sidebar .nav-item {
        padding: 5px 10px;
        position: relative;
    }

    .sidebar .nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(to right, transparent, #ffffff80, transparent);
    }

    .sidebar .nav-link {
        padding: 8px 15px;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .sidebar .nav-link:hover {
        transform: translateX(5px);
        background-color: #1e4d61;
    }

    </style>
</head>

<body>
        <!-- 添加折叠按钮 -->
        <button class="toggle-btn">
            <i class="fa fa-angle-left"></i>
        </button>
    
    <!-- 左侧导航栏 -->
    <div class="sidebar">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link " href="/?page=fun_result_table" data-target="/tpl/fun_result_table.html">
                    <i class="fa fa-table"></i><span>函数结果表</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/?page=conusme_speed" data-target="/tpl/conusme_speed.html">
                    <i class="fa fa-tachometer"></i><span>消费速率图</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/?page=running_consumer_by_ip" data-target="/tpl/running_consumer_by_ip.html">
                    <i class="fa fa-server"></i><span>运行中消费者(by ip)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/?page=running_consumer_by_queue_name" data-target="/tpl/running_consumer_by_queue_name.html">
                    <i class="fa fa-list"></i><span>运行中消费者(by queue)</span>
                </a>
            </li>
            <li class="nav-item ">
                <a class="nav-link active" href="/?page=queue_op" data-target="/tpl/queue_op.html">
                    <i class="fa fa-cogs"></i><span>队列操作</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/?page=rpc_call" data-target="/tpl/rpc_call.html">
                    <i class="fa fa-cogs"></i><span>rpc调用</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/?page=about" data-target="/tpl/about.html">
                    <i class="fa fa-info-circle"></i><span>说明</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="javascript:void(0)" id="logoutBtn">
                    <i class="fa fa-sign-out"></i><span>退出登录</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content" id="content000">
        <!-- 初始加载 Home 页面内容 -->
         <!-- 右侧内容区域 -->
    <iframe id="content" frameborder="0">
        <!-- 初始加载 Home 页面内容 -->
    </iframe >
    </div>

    

    <!-- 添加退出确认模态框 -->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="logoutModalLabel">确认退出</h4>
          </div>
          <div class="modal-body">
            确定要退出登录吗？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="confirmLogout">确认退出</button>
          </div>
        </div>
      </div>
    </div>

    <script src="{{ url_for('static',filename='js/form-memory.js') }}"></script>
    <script>
            $(document).ready(function () {
        // ... 现有代码 ...

        // 添加折叠功能
        $('.toggle-btn').click(function() {
            $('.sidebar').toggleClass('collapsed');
            $('.main-content').toggleClass('expanded');
            $('.toggle-btn').toggleClass('collapsed');
            
            // 切换箭头方向
            var icon = $(this).find('i');
            if (icon.hasClass('fa-angle-left')) {
                icon.removeClass('fa-angle-left').addClass('fa-angle-right');
            } else {
                icon.removeClass('fa-angle-right').addClass('fa-angle-left');
            }
        });
    });

        $(document).ready(function () {
            // 检查URL参数是否指定了页面
            var urlParams = new URLSearchParams(window.location.search);
            var pageName = urlParams.get('page');
            
            // 初始加载页面
            if (pageName) {
                // 根据URL参数加载页面
                loadPage('/tpl/' + pageName + '.html');
                // 设置对应导航为active
                $('.sidebar .nav-link').removeClass('active');
                $('.sidebar .nav-link[href="/?page=' + pageName + '"]').addClass('active');
            } else {
                // 默认加载队列操作页面
                loadPage('/tpl/queue_op.html');
            }

            // 导航栏点击事件
            $('.sidebar .nav-link').click(function (e) {
                // 不阻止默认行为，允许页面跳转
                // e.preventDefault();
                
                // 移除所有导航项的 active 类
                $('.sidebar .nav-link').removeClass('active');
                // 为当前点击的导航项添加 active 类
                $(this).addClass('active');
                // 获取要加载的页面文件名
                const targetPage = $(this).data('target');
                // 加载页面内容
                loadPage(targetPage);
            });

            // 加载页面内容的函数
            function loadPage(page) {
                $.ajax({
                    url: page,
                    method: 'GET',
                    success: function (data) {
                        $('#content').attr('src', page);
                    },
                    error: function () {
                        $('#content').html('<p>Error loading page.</p>');
                    }
                });
            }

            // 退出登录确认
            $('#logoutBtn').click(function(e) {
                e.preventDefault();
                $('#logoutModal').modal('show');
            });
            
            $('#confirmLogout').click(function() {
                window.location.href = '/logout';
            });
        });
    </script>
</body>

</html>